﻿@{
    ViewBag.Title = "Thống kê đăng ký hồ sơ theo Bậc đào tạo";
    AjaxOptions aj = new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "KetQuaTK",
        LoadingElementId = "loading-icon",
        OnFailure = "AjaxFailure",
        OnBegin = "AjaxBegin",
        OnComplete = "AjaxComplete",
        HttpMethod = "POST", 
    };
}

@using (Ajax.BeginForm(aj))
{
    <div class="form-horizontal">
        <div class="col-md-6">
            <div>
                <label class="control-label col-md-3">Từ ngày: </label>
                <div class="col-md-9">
                    <div class="form-group">
                        <div class='input-group date' id='TuNgaydatetimepicker'>
                            <input type='text' class="form-control" value="@DateTime.Now.AddDays(-30).ToString("dd/MM/yyyy")" data-date-format="DD/MM/YYYY" name="TuNgay" placeholder="Chọn ngày bắt đầu" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <label class="control-label col-md-3">Trạng thái: </label>
                <div class="col-md-9">
                    <div class="form-group">
                        <select name="TrangThaiKichHoat" class="form-control">
                            <option value="1">Tất cả</option>
                            <option value="2">Đã đóng phí</option>
                            <option value="3">Chưa đóng phí</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div>
                <label class="control-label col-md-3">Đến ngày: </label>
                <div class="col-md-9">
                    <div class="form-group">
                        <div class='input-group date' id='DenNgaydatetimepicker'>
                            <input type='text' value="@DateTime.Now.ToString("dd/MM/yyyy")" class="form-control" data-date-format="DD/MM/YYYY" name="DenNgay" placeholder="Chọn ngày kết thúc" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="col-md-offset-1 col-md-10">
                <input type="submit" value="Thống kê" class="btn btn-danger" />
            </div>
        </div>
    </div>
}

<span name="Error"></span>
<link href="~/Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script src="~/Scripts/chart/highcharts.js"></script>
<script src="~/Scripts/chart/modules/exporting.js"></script>
<script>
    $(document).ready(function () {
        $.validator.methods["date"] = function (value, element) { return true; }
        $('form').validate({
            rules: {
                TuNgay: {
                    required: true,
                    date: true,

                },
                DenNgay: {
                    required: true,
                    date: true,
                }
            },
            messages: {
                TuNgay: {
                    required: "",
                    date: "Không đúng định dạng ngày"
                },
                DenNgay: {
                    required: "",
                    date: "Không đúng định dạng ngày"
                }
            }
        });
        $('#TuNgaydatetimepicker').datetimepicker({
        });
        $('#DenNgaydatetimepicker').datetimepicker({
        });
    })
</script>
<div id="KetQuaTK" class="clear"></div>
